<template>
  <div class="app-container">
    <detail-table :columns="columns" :detail="detail" :label-width="120" />
    <div v-if="detail.photo" class="photo-area">
      <img :src="detail.photo" alt="教师照片">
    </div>
  </div>
</template>

<script>
import { getTeacherDetail } from '@/api/basic'
import DetailTable from '@/components/detail-table/index'
import { teacherDetailColumns } from '../../columns'

export default {
  components: { DetailTable },
  data() {
    return {
      columns: teacherDetailColumns,
      detail: {}
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    async getDetail() {
      const id = this.$route.params.id
      try {
        const res = await getTeacherDetail({
          id: Number(id)
        })
        if (res) {
          this.detail = res
        }
      } catch (err) {
        console.log('接口出错')
      }
    }
  }
}
</script>
<style scoped lang="less">
  .app-container {
    background: #fff;
    flex: 1;
  }
  .photo-area {
    position: absolute;
    top: 30px;
    right: 30px;
    img {
      width: 300px;
    }
  }
</style>
